import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
	constructor (props) {
		super (props);
		this.state = {
			username: localStorage.getItem("username"),
			avatar: ''
		}
	}
	gopersonal () {
		this.props.history.push('/personal');
	}
	gosetting () {
		this.props.history.push('/setting');
	}
	componentDidMount () {
		if(localStorage.getItem("username")){
			// console.log(document.querySelector('.user-login'))
			document.querySelector('.user-login').style.display = 'flex'
			document.querySelector('.user-nologin').style.display = 'none'
		} else {
			document.querySelector('.user-nologin').style.display = 'flex'
			document.querySelector('.user-login').style.display = 'none'
		}
		let username = this.state.username
		axios.post('/users/personal',{username:username})
			.then((data) => {
				// console.log(data.data)
				let personal = data.data[0]
				this.setState ({
					avatar: personal.avatar
				})
			})
	}
  render() {
    return (
      	<div className="box">
      		<div className="content">
      			<div className="uesr-header">
							<div className="avatar">
								<div className="user-nologin user-avatar">
									<span>
										<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3860692215,1130423227&fm=26&gp=0.jpg" alt="用户头像" />
									</span>
									<a href="http://localhost:3000/#/login">登录 /</a>
									<a href="http://localhost:3000/#/login"> 注册</a>
								</div>
								<div className="user-login user-avatar">
									<span onClick={this.gopersonal.bind(this)}>
										<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3860692215,1130423227&fm=26&gp=0.jpg" alt="用户头像" />
									</span>
									<div className="username">
										<p>{ this.state.avatar }</p>
										<p className="iconfont icon-huiyuanqia-copy-copy">普通会员</p>
									</div>
								</div>
								<b className="shezhi" onClick={this.gosetting.bind(this)}><i className="iconfont icon-shezhi"></i></b>
							</div>
							<ul className="user-nav">
								<li>
									<a href="www.baidu.com">
										<span>0</span>
										<p>我的积分</p>
									</a>
								</li>
								<li>
									<a href="www.baidu.com">
										<span>0</span>
										<p>我赞过的</p>
									</a>
								</li>
								<li>
									<a href="www.baidu.com">
										<span>0</span>
										<p>我喜欢的</p>
									</a>
								</li>
								<li>
									<a href="www.baidu.com">
										<span className="iconfont icon-zuji"></span>
										<p>浏览记录</p>
									</a>
								</li>
							</ul>
						</div>
						<div className="my-order">
							<div className="order-list">
								<a href="www.baidu.com">
									<span>全部订单</span>
									<i className="iconfont icon-zuo"></i>
								</a>
							</div>
							<div className="order-detail">
								<ul>
									<li>
										<i className="iconfont icon-qianbao"></i>
										<p>待付款</p>
									</li>
									<li>
										<i className="iconfont icon-daifahuo"></i>
										<p>待发货</p>
									</li>
									<li>
										<i className="iconfont icon-daishouhuo"></i>
										<p>待收货</p>
									</li>
									<li>
										<i className="iconfont icon-daipingjia"></i>
										<p>待评价</p>
									</li>
									<li>
										<i className="iconfont icon-shouhou"></i>
										<p>售后</p>
									</li>
								</ul>
							</div>
						</div>
						<div className="personal">
							<ul>
								<li>
									<i className="iconfont icon-hongbao"></i>
									<p>红包</p>
								</li>
								<li>
									<i className="iconfont icon-huaban"></i>
									<p>包邮券</p>
								</li>
								<li>
									<i className="iconfont icon-huiyuanqia-dazhe"></i>
									<p>打折券</p>
								</li>
								<li>
									<i className="iconfont icon-bi"></i>
									<p>邦购币</p>
								</li>
								<li>
									<i className="iconfont icon-huiyuanqia-copy-copy"></i>
									<p>会员卡</p>
								</li>
								<li>
									<i className="iconfont icon-qiandao"></i>
									<p>签到</p>
								</li>
								<li>
									<i className="iconfont icon-kefu"></i>
									<p>在线客服</p>
								</li>
								<li>
									<i className="iconfont icon-yijian"></i>
									<p>意见反馈</p>
								</li>
							</ul>
						</div>		
      		</div>
      	</div>
    );
  }
}

export default App;
